<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>爱打印-iprint 在线单页打印</title>
		<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
		<style>
			.ip-row {
				margin-top: 40px;
				margin-bottom: 40px;
			}
			
			.ip-p {
				margin-bottom: 30px;
			}
		</style>
	</head>

	<body>
	<div th:insert="~{front/head :: header}"></div>
	<div id="ctxPath" th:src="@{/}"></div>
		<!--主体-->
		<div class="layui-container">
			<!--商品购买-->
			<div class="layui-row ip-row">
				<div class="layui-col-md5">
					<img th:src="@{/img/page.jpg}" />
				</div>
				<div class="layui-col-md7">
					<fieldset class="layui-elem-field layui-field-title">
						<legend>单页快印-A3/A4/商品促销/活动宣传/社团迎新</legend>
					</fieldset>
					<form class="layui-form" th:action="@{order/upload}" th:method="post" id="fo">
						<!--打印份数-->
						<div class="layui-form-item">
							<label class="layui-form-label">打印页数</label>
							<div class="layui-input-inline">
								<input name="count" required lay-verify="required|count" value="1" autocomplete="off" class="layui-input">
								<input name="title" value="leaflet" type="hidden">
							</div>
						</div>
						<!--单面/双面打印-->
						<div class="layui-form-item">
							<label class="layui-form-label">单/双面打印</label>
							<div class="layui-input-block">
								<input type="radio" name="singleDouble" title="单面" value="单面" checked="checked">
								<input type="radio" name="singleDouble" title="双面" value="双面" >
							</div>
						</div>
						<!--纸张类型-->
						<div class="layui-form-item">
							<div class="layui-inline">
								<label class="layui-form-label">纸张类型</label>
								<div class="layui-input-inline">
									<select name="pageType" lay-filter="pageType">
										<option value="彩色铜纸版" >彩色铜纸版</option>
										<option value="彩色普通纸" >彩色普通纸</option>
										<option value="黑白普通纸" >黑白普通纸</option>
									</select>
								</div>
							</div>
						</div>
						<!--纸张尺寸-->
						<div class="layui-form-item">
							<div class="layui-inline">
								<label class="layui-form-label">纸张尺寸</label>
								<div class="layui-input-inline">
									<select name="pageSize">
										<option value="A3" >A3</option>
										<option value="A4" >A4</option>
									</select>
								</div>
							</div>
						</div>
						<!--纸张克数-->
						<div class="layui-form-item">
							<div class="layui-inline">
								<label class="layui-form-label">纸张克数</label>
								<div class="layui-input-inline">
									<select name="pageWeight">
										<option value="70g" >70g</option>
										<option value="80g" >80g</option>
										<option value="200g" >200g</option>
										<option value="157g" >157g</option>
										<option value="250g" >250g</option>
									</select>
								</div>
							</div>
						</div>
						<!---->
						<blockquote class="layui-elem-quote">
							<p style="font-size: xx-large;color: red;" id="final">￥0.1元</p>
						</blockquote>
						<!--提交-->
						<div class="layui-form-item">
							<div class="layui-input-block">
								<button class="layui-btn-lg layui-btn-danger " lay-submit="" lay-filter="put">立即提交</button>
							</div>
						</div>
					</form>
				</div>
			</div>
			<div class="layui-row ip-row">
				<img th:src="@{/img/pageinfo.png}" style="width: 100%;">
			</div>
			<!--商品-->
			<div class="layui-row ip-row">
				<div class="layui-tab">
					<ul class="layui-tab-title">
						<li class="layui-this">商品详情</li>
						<li>打印指导</li>
					</ul>
					<div class="layui-tab-content">
						<!--详情信息-->
						<div class="layui-tab-item layui-show">
							<!--价格信息-->
							<div layui-row ip-row>
								<!--打印单价-->
								<fieldset class="layui-elem-field layui-field-title">
									<legend>单页概述</legend>
								</fieldset>
								<table class="layui-table">
									<colgroup>
										<col width="20%">
										<col width="80%">
									</colgroup>
									<tbody>
										<tr>
											<td>印刷类型</td>
											<td>宣传单页</td>
										</tr>
										<tr>
											<td>纸张类型</td>
											<td>彩色铜纸版/彩色普通版/黑白普通纸</td>
										</tr>
										<tr>
											<td>印刷工艺</td>
											<td>单双面</td>
										</tr>
										<tr>
											<td>成品尺寸</td>
											<td>A3/A4或特殊尺寸</td>
										</tr>
										<tr>
											<td>印刷数量</td>
											<td>不限</td>
										</tr>
										<tr>
											<td>纸张厚度</td>
											<td>70g/80g/157g/200g/250g</td>
										</tr>
										<tr>
											<td>彩色模式</td>
											<td>CMYK</td>
										</tr>
										<tr>
											<td>上传文件格式</td>
											<td>PSD/AI/CDR/PDF/EPS/JPG/TIF</td>
										</tr>
									</tbody>
								</table>
							</div>
							<div layui-row >
								<!--打印单价-->
								<fieldset class="layui-elem-field layui-field-title">
									<legend>彩色通纸版-元/张</legend>
								</fieldset>
								<table class="layui-table">
									<thead>
										<tr>
											<th>纸张类型</th>
											<th colspan="3">A3</th>
											<th colspan="3">A4</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>纸张克数</td>
											<td>157g</td>
											<td>200g</td>
											<td>250g</td>
											<td>157g</td>
											<td>200g</td>
											<td>250g</td>
										</tr>
										<tr>
											<td>单面(元/页)</td>
											<td>1.30</td>
											<td>1.50</td>
											<td>1.80</td>
											<td>2.50</td>
											<td>3.00</td>
											<td>3.50</td>
										</tr>
										<tr>
											<td>双面(元/张)</td>
											<td>2.00</td>
											<td>2.20</td>
											<td>2.80</td>
											<td>3.50</td>
											<td>4.00</td>
											<td>4.50</td>
										</tr>
									</tbody>
								</table>
							</div>
							<div layui-row >
								<!--打印单价-->
								<fieldset class="layui-elem-field layui-field-title">
									<legend>普通纸版-元/张</legend>
								</fieldset>
								<table class="layui-table">
									<thead>
										<tr>
											<th>纸张类型</th>
											<th colspan="2">黑白-70g</th>
											<th colspan="2">彩色-80g</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>纸张尺寸</td>
											<td>A4</td>
											<td>A3</td>
											<td>A4</td>
											<td>A3</td>
										</tr>
										<tr>
											<td>单面(元/张)</td>
											<td>0.10</td>
											<td>0.20</td>
											<td>0.80</td>
											<td>1.00</td>
										</tr>
										<tr>
											<td>双面(元/张)</td>
											<td>0.16</td>
											<td>0.30</td>
											<td>1.50</td>
											<td>2.00</td>
										</tr>
									</tbody>
								</table>
							</div>
							<!--提示信息-->
							<div class=" layui-row ip-row ">
								<fieldset class="layui-elem-field small ">
									<legend>
										<span class="layui-badge-dot "></span>
										<span class="layui-badge-dot layui-bg-orange "></span>
										<span class="layui-badge-dot layui-bg-green "></span> 温馨提示
										<span class="layui-badge-dot layui-bg-green "></span>
										<span class="layui-badge-dot layui-bg-orange "></span>
										<span class="layui-badge-dot "></span>
									</legend>
									<div class="layui-field-box ">
										<p>1、平台实行明码标价，将成本以及利润降到最低，将打印质量和真诚的服务回馈给客户；</p>
										<p>2、我们会在打印完成前后认真检查，但由于订单数目多，难免出现其他情况，当您收到订单后出现质量，数量配送时间等问题，请及时联系客户；</p>
										<p>3、单页目前只支持PSD/AI/CDR/PDF/EPS/JPG/TIF格式，如果格式不符合请您转换后再进行上传；</p>
									</div>
								</fieldset>
							</div>
						</div>
						<!--打印指导-->
						<div class="layui-tab-item">
							<div class="layui-row">
								<fieldset class="layui-elem-field small ">
									<legend>
										<p style="font-size: xx-large;color: red;">打印指导</p>
									</legend>
									<div class="layui-field-box ">
										<p class="ip-p">
											<span class="layui-badge-dot layui-bg-orange"></span> 为了保证文件的正确性，下单前请一定要自行确认文件内容无误，有无错别字等。
										</p>
										<p class="ip-p">
											<span class="layui-badge-dot"></span> 上传文件时，请确认打印参数，有特殊说明的，一定要留言备注，如有疑问，请联系客服！
										</p>
										<p class="ip-p">
											<span class="layui-badge-dot layui-bg-green"></span> 一切打印资料给予保密处理，文件打印文笔立即删除，如需要再打印源文件请重新上传并下单，不便之处请谅解。
										</p>
										<p class="ip-p">
											<span class="layui-badge-dot layui-bg-cyan"></span> 爱打印在线打印平台，专注于校园云打印，承诺普通文档打印，3小时内送达，如超出时间，请联系客服。
										</p>
										<p class="ip-p">
											<span class="layui-badge-dot layui-bg-blue"></span> 配送时间说明：晚上8点之前完成付款的订单，正常当晚10点前送达(如遇校区关门等特殊情况，配送人员会电话联系)，晚8点之后的订单，正常是第二天10：30分之前送达。如遇特殊急件，请联系客服。
										</p>
										<p class="ip-p">
											<span class="layui-badge-dot layui-bg-black"></span> 如订单配送至指定位置的，订单状态是已配送的状态。
										</p>
										<p class="ip-p">
											<span class="layui-badge-dot layui-bg-gray"></span> 取件之后请及时检查文件，如有任何问题，都可以与客服联系，我们希望您拿到的都是满意的，爱打印时刻为您提供贴心便捷的打印服务。
										</p>
									</div>
								</fieldset>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--js-->
		<script type="text/javascript " th:src="@{/layui/layui.js} "></script>
		<script type="text/javascript ">
			layui.use('element', function() {
				var element = layui.element; 
			});
		</script>
		<script>
			layui.use(['form', 'layedit', 'laydate'], function() {
				var form = layui.form,
					layer = layui.layer,
					$ = layui.$;
                var ctxPath = document.getElementById("ctxPath").getAttribute("src");
				//自定义验证规则
				form.verify({
					count: [/^(?!0)(?:[0-9]{1,3}|1000)$/,'数量必须在1到1000以内的数字']
				});
				//监听提交
				 form.on('submit(put)', function(data) {
					 var isLogin = false;
					 $.ajax({
							cache:true,
							type:"GET",
							url: ctxPath+"isLogin",
							async: false,
							success: function(data) {
								if(data == "yes") {
									isLogin = true;
								} else if(data == "no"){
									layer.msg("您还没有登陆,正在为您跳转到登陆页面！");
									setTimeout(function(){
										location.href=ctxPath+"login";
									},2000);
								}else{
									layer.msg("未知错误，请联系管理员！");
								}
							}
						});
					 return isLogin;
				});
				
				/* 下拉选联动 */
				form.on('select(pageType)', function(data) {
					var op1 = $("<option value='70g'>70g</option>"),
						op2 = $("<option value='80g'>80g</option>"),
						op3 = $("<option value='157g'>157g</option>"),
						op4 = $("<option value='200g'>200g</option>"),
						op5 = $("<option value='250g'>250g</option>");
					var $sel = $("select[name='pageWeight']");
					if(data.value=='彩色铜纸版'){
						$sel.html('');
						$sel.append(op1);
						$sel.append(op2);
						$sel.append(op3);
						$sel.append(op4);
						$sel.append(op5);
					}else if(data.value =='彩色普通纸'){
						$sel.html('');
						$sel.append(op2);
					}else{
						$sel.html('');
						$sel.append(op1);
					}
					form.render('select');
				});
			});
		</script>
	</body>

</html>